import { createRouter, createWebHashHistory } from 'vue-router';
import { useAppStoreHook } from "@/store/modules/app";

const routes = [
  // 路由配置
  {
    path: "/",
    name: "index",
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home/home.vue'),
  },
  {
    path: '/videoList',
    name: 'videoList',
    component: () => import('@/views/video/videoList.vue'),
  }, {
    path: '/videoInfo',
    name: 'videoInfo',
    component: () => import('@/views/video/videoInfo.vue'),
  }, /* {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/login.vue'),
  }, {
    path: '/settingVideoList',
    name: 'settingVideoList',
    component: () => import('@/views/setting/settingVideoList.vue'),
  }, */ {
    path: '/404',
    name: '404',
    component: () => import('@/views/error/page404.vue'),
  },
  { path: '/:pathMatch(.*)', redirect: '/404', hidden: true }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 全局路由守卫
router.beforeEach((to, from) => {
  const baseStore = useAppStoreHook()
  //footer下面的5个按钮，对跳不要用动画
  const noAnimation = ['/login']
  if (noAnimation.indexOf(from.path) !== -1 && noAnimation.indexOf(to.path) !== -1) {
    return true
  }

  const toDepth = routes.findIndex((v) => v.path === to.path)
  const fromDepth = routes.findIndex((v) => v.path === from.path)
  // const fromDepth = routeDeep.indexOf(from.path)
  //   当我们 前进 时，从 excludeNames 数组中 删除 目的页面组件的 name 值，那么目的页面将被缓存
  // 当我们 后退 时，从 excludeNames 数组中 添加 当前页面组件的 name 值，那么当前页面被不会被缓存
  if (toDepth > fromDepth) {
    if (to.matched && to.matched.length) {
      const toComponentName = to.name
      baseStore.updateExcludeNames({ type: 'remove', value: toComponentName })
    }
  } else {
    if (from.matched && from.matched.length) {
      const fromComponentName = from.name
      baseStore.updateExcludeNames({ type: 'add', value: fromComponentName })
    }
  }
  return true
})

export default router;
